<template>
    <div >
     <h3>评论子组件</h3>
     <hr/>
     <textarea placeholder="最多吐槽120个字" maxlength="120"></textarea>
     <mt-button type="primary" size="large">发表评论</mt-button><br/>
     <div class="cmt-list">
        <div class="cmt-item" v-for="item in comments" :key="comments.id">
          <div class="cmt-title">
            第{{comments.id}}楼&nsp;&nsp;用户：匿名用户&nsp;&nsp;发表时间:20190202
          </div>
          <div class="cmt-body">
            啦啦啦啦哈哈哈嘿嘿
           </div>
        </div>
     </div>
     
      <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
 export default{
     data(){
         return{
             pageIndex:1,
             comments:[]
         };
     },
     created(){
       this.getComment()
     },
     methods:{
     getComment(){
        this.$http.get("http://php.dev/mysql2.php"+this.id+"?pageindex=1"+this.pageIndex).
        //  this.$http.get("http://php.dev/mysql2.php"+this.id).
         then(result=>{
             if(result.status==200){
                // this.comments=result.body;
                //加载时不会把老数据清空
                this.comments=this.comments.concat(result.body);
                Toast("数据获取成功");
             }
             else{
                 Toast("数据获取失败");
             }
         });
     }
     },
     getmore(){
         this.pageIndex++;
         this.getComment();
     },
     props:["id"]
 }

</script>
<style>
   .cmt-list{
       background-color:gray;
       margin:10px;
   }
        
    
</style>